<template>
  <div>
    <div>
      <input v-model="longitude" placeholder="请输入经度" />
      <input v-model="latitude" placeholder="请输入纬度" />
      <button @click="updateCenter">更新中心点</button>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  data() {
    return {
      longitude: "", // 存储输入的经度
      latitude: "", // 存储输入的纬度
      map: null, // 地图实例
      maker: null // 标记
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
    this.maker?.destroy();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "926bd90bda96e98da627456c75625cfc", // 安全配置
      };

      AMapLoader.load({
        key: "926bd90bda96e98da627456c75625cfc", // 你的高德地图API Key
        version: "2.0", // 使用的JSAPI版本
        plugins: ["AMap.Scale"], // 插件列表
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D", // 是否为3D模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始中心点
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    updateCenter() {
      // const lon = parseFloat(this.longitude);
      // const lat = parseFloat(this.latitude);
      const lon = 123;
      const lat = 30

      if (!isNaN(lon) && !isNaN(lat)) {
        // 如果输入的经纬度是有效的，更新地图中心点
        this.map.setCenter([lon, lat], true);
        this.map.setZoom(8);

        // 创建或更新标记
        if (this.marker) {
          // 如果标记已存在，更新其位置
          this.marker.setPosition([lon, lat]);
        } else {
          // 如果标记不存在，创建一个新的标记
          AMapLoader.load({
            key: "926bd90bda96e98da627456c75625cfc", // 你的高德地图API Key
            version: "2.0", // 使用的JSAPI版本
            plugins: ["AMap.Marker"], // 插件列表
          }).then((AMap) => {
            this.marker = new AMap.Marker({
              position: [lon, lat], // 标记位置
              icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png", // 红色圆点图标
              map: this.map, // 将标记添加到地图上
            });
          });
          // 创建或更新信息窗口
          const content = `<div style="padding: 10px; color: #333;">当前经度: ${lon}<br>当前纬度: ${lat}<br>这是一些提示信息</div>`;
          if (this.infoWindow) {
            // 如果信息窗口已存在，更新其内容和位置
            this.infoWindow.setContent(content);
            this.infoWindow.open(this.map, [lon, lat]);
          } else {
            // 如果信息窗口不存在，创建一个新的信息窗口
            AMapLoader.load({
              key: "926bd90bda96e98da627456c75625cfc", // 你的高德地图API Key
              version: "2.0", // 使用的JSAPI版本
              plugins: ["AMap.InfoWindow"], // 插件列表
            }).then((AMap) => {
              this.infoWindow = new AMap.InfoWindow({
                content: content,
                offset: new AMap.Pixel(0, -30), // 信息窗口相对于标记的偏移量
              });
              this.infoWindow.open(this.map, [lon, lat]);
            });
          }
        }
      } else {
        alert("请输入有效的经纬度！");
      }
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 400px;
}

input {
  margin-right: 10px;
}

</style>
